<template>
  <div class="search">
    <!--搜索导航-->
    <search-nav :isShowSearchPanel="isShowSearchPanel"></search-nav>
    <!--页面主体-->
    <div class="shop">
      <!--左边-->
      <div class="menu-wrapper">
        <ul>
          <li class="menu-item" :class="{current:index0===currentIndex}" @click="clickLeftItem(index0)" v-for="(goods,index0) in searchlist" :key="index0" ref="menulist">
            <span>{{goods.name}}</span>
          </li>
        </ul>
      </div>
      <!--右边-->
      <div class="shop-wrapper">
        <ul ref="shopParent">
          <li class="shop-li" v-for="(items,index) in searchlist" :key="index">
            <div class="shop-title">
              <h4>{{items.name}}</h4>
              <a href="">查看更多&nbsp;></a>
            </div>
            <ul class="phone-type" v-if="items.tag==='phone'">
              <!--index遵循就近原则-->
              <li v-for="(phone,index) in items.category" :key="index">
                <img :src="phone.icon" alt="">
              </li>
            </ul>
            <ul class="shop-item">
              <li v-for="(item,index1) in items.items" :key="index1">
                <img :src="item.icon" alt="">
                <span>{{item.title}}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <!--搜索面板,以类似于模态框的形式出现，不使用路由跳转-->
    <!--如果后续想要实现动画效果，可以在该子组件外层包个vue的transition标签-->
    <search-panel v-if="isShow" :isShowSearchPanel="isShowSearchPanel"></search-panel>
  </div>
</template>

<script>
    import  SearchNav from './children/SearchNav.vue'
    import  SearchPanel from './children/SearchPanel.vue'
    import {mapState} from 'vuex'
    // 引入滚动的第三方插件，因为滚动效果仅在该页面存在，所以不再main.js中通过Vue.use的方式进行全局引入
    import BScroll from 'better-scroll'
    export default {
        name: 'Search',
        components:{
          SearchNav,
          SearchPanel
        },
        computed:{
          ...mapState(['searchlist']),
          // 使用计算属性动态决定左侧哪个被选中
          currentIndex(){
            // 使用es6新语法获取数据
            const {scrollY,rightLiTops} = this;
            // 遍历rightLiTops，通过计算获取currentIndex
            return rightLiTops.findIndex((LiTop,index)=>{
              this._leftScroll(index);
              // 可以通过改变该条件改变左右联动的规则
              return scrollY >= LiTop && scrollY < rightLiTops[index+1];
            })
          }
        },
        data(){
          return {
            scrollY: 0,        // 右侧列表滑动的Y轴坐标(实时更新的)
            rightLiTops: [],  // 右侧所有分类距离顶部头的位置
            isShow: false     // 控制搜索面板的隐藏与显示
          }
        },
        mounted(){
          // 关于滚动和轮播与异步请求冲突的问题，除了使用watch监听外也可以在这里使用回调函数来解决
          this.$store.dispatch('reqSearchGoods');
        },
        methods: {
          // 开发中有一个约定俗成的规则：内部调用的方法前面一般加下划线；在template中调用的方法一般不加下划线
          _initScroll(){
             // 1.左边滚动效果
             this.leftBs = new BScroll('.menu-wrapper', {
              scrollY: true,
              click: true
            });
            // 2.右边滚动效果,使用this相当于将变量作用域提升至全局
            this.rightBs = new BScroll('.shop-wrapper', {
              probeType: 3
            });
            // 监听右侧的滑动,滑动时触发回调函数，系统默认传递一个对象类型的参数。实时更新scrollY
            this.rightBs.on('scroll',(pos)=>{
              this.scrollY = Math.abs(pos.y);
            })
          },
          // 获取右侧所有分类的头部位置
          _initRightLiTops(){
            // 临时数组
            let tempArray = [];
            // 定义变量，记录高度
            let top = 0;
            tempArray.push(top);
            // 获取所有右侧li元素，转为真数组遍历，获取scrollY。vue中通过ref获取dom节点
            let allLis = this.$refs.shopParent.getElementsByClassName('shop-li');
            // 通过原型链进行伪真转化
            Array.prototype.slice.call(allLis).forEach(li=>{
              top += li.clientHeight;
              tempArray.push(top);
            });
            this.rightLiTops = tempArray;
          },
          // 左侧点击切换
          clickLeftItem(index){
            this.scrollY = this.rightLiTops[index];
            this.rightBs.scrollTo(0,-this.scrollY,300);
          },
          // 左侧联动
          _leftScroll(index){
            let menulist = this.$refs.menulist;
            let el = menulist[index];
            this.leftBs.scrollToElement(el,300,0,-100);
          },
          // 设置搜索面板是否显示
          isShowSearchPanel(flag){
            this.isShow = flag;
          }
        },
        // 在数据完加载后再实例化滚动插件，采用vue提供的watch属性，监听vuex中搜索数据的变化
        watch: {
          searchlist(){
            // 使用vue提供的$nextTick，实现dom元素滞后渲染
            this.$nextTick(()=>{
              // vuex中有搜索数据后，开始初始化滚动实例
              this._initScroll();
              this._initRightLiTops();
            })
          }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .search
    width 100%
    height 100%
    .shop
      display flex
      position absolute
      top: 60px
      bottom 50px
      width 100%
      background-color: #fff
      overflow hidden
      .menu-wrapper
        background-color: #e0e0e0
        width 80px
        flex 0 0 80px
        .menu-item
          width 100%
          height 60px
          background-color: #fafafa
          display flex
          justify-content center
          align-items center
          font-weight lighter
          color #666
          position relative
        .current
          color #e02e24
        .current::before
          content ''
          background-color: #e02e24
          width 4px
          height 30px
          position absolute
          left 0
      .shop-wrapper
        flex 1
        background-color: #fff
        .shop-title
          display flex
          flex-direction row
          padding 0 10px
          height 44px
          align-items center
          justify-content space-between
          color #999
          a
            color #999
            text-decoration none
            font-weight lighter
        .shop-item
          display flex
          flex-wrap wrap
          li
            display flex
            flex-direction column
            width 33.3%
            height 90px
            justify-content center
            align-items center
            color #666
            font-size 14px
            font-weight lighter
            img
              width 60%
              height 60%
              margin-bottom 5px
        .phone-type
          width 100%
          display flex
          flex-wrap wrap
          flex-direction row
          border-bottom-1px(#ccc)
          li
            width 33.3%
            display flex
            justify-content center
            align-items center
            img
              width 70%
</style>
